window.addEventListener('load', function () {
    //头部
    let catenating = gitEleAll('header ul li')

    let apl_top = [{
        link: '首页'
    }, {
        link: 'API'
    }, {
        link: '云服务'
    }, {
        link: '案例'
    }, {
        link: '开发者'
    },]
    apl_top.forEach(function (v) {
        gitEle('header ul').innerHTML += `<li><a href="#">${v.link}</a></li>`
    })
    // banner
    //获取数据源
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务1", keyword: "IP", isnew: false },
        { name: "吃喝玩乐1", keyword: "视频", isnew: false },
        { name: "文娱视频1", keyword: "视频", isnew: false },
        { name: "免费接口大全1", keyword: "短信", isnew: true },
        { name: "短信1", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ]
    //main上半部
    //遍历数据源
    apiTypeData.forEach(function (v, i) {
        //输入到网页

        // gitEle('.banner ul').innerHTML+=`<li class="mb10 font16 fl">${v.name}</li>`
        //创建原生节点
        let liDom = document.createElement(`li`)
        //给节点添加内容
        liDom.innerHTML = `${v.name}`
        //判断在下标为0时第一个li显示样式
        if (i == 0) {
            liDom.className = 'active '
        }
        //添加原生属性
        liDom.setAttribute('title', v.keyword)
        //判断在对象名中的isnew为真时对应li文字加粗
        if (v.isnew) {
            liDom.style.fontWeight = "bold"
        }
        //添加到节点树
        gitEle(".banner ul").appendChild(liDom)


    })
    //获取事件委派的元素
    let ulDom = gitEle('.banner ul')
    //获取li伪数组进行清除类名
    let liDom = gitEleAll('.banner ul li')
    //注册父级点击事件
    ulDom.addEventListener('click', function (e) {
        //遍历li清除类名
        liDom.forEach(function (v) {
            v.classList.remove('active')
        })
        //判断事件源是否为li，是则添加类名
        if (e.target.nodeName == "LI") {
            e.target.className = "active"
            //输出到span标签
            gitEle('.main div span').innerText = e.target.innerText
            //输出到input标签
            gitEle('.main div input').value = e.target.title
            console.log(e.target.title);
        }
    })
    //apl数据申请板块
    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },]
    //获取父节点渲染
    // listDataArr.forEach(function(v){
    //     gitEle('.main ul').innerHTML+=
    //     `<li>
    //     <h1 class="${v.isSpecial?'on':''}">企业专业</h1>
    //     <img src="./images/${v.img}" alt="">
    //     <h2 class="mb10">${v.name}</h2>
    //     <h3 class="${v.price==='免费'?'green':'red'}">${v.price}</h3>
    //     <h4>申请数据</h4>

    // </li>`
    // })
    //渲染li
    // 定义截取数量
    // let pageNum=0
    // let currentPage=5
    //截取数组
    let pageNum = 0;
    let currentPage = 5;
    subentry('.main ul', pageNum, currentPage, listDataArr)
    // function subentry(pageNum, currentPage) {


    //     gitEle('.main ul').innerHTML = ''
    //     listDataArr.slice(pageNum, currentPage).forEach(function (v) {

    //         gitEle('.main ul').innerHTML +=
    //             `<li>
    //             <h1 class="${v.isSpecial ? 'on' : ''}">企业专业</h1>
    //             <img src="./images/${v.img}" alt="">
    //             <h2 class="mb10">${v.name}</h2>
    //             <h3 class="${v.price === '免费' ? 'green' : 'red'}">${v.price}</h3>
    //             <h4>申请数据</h4>

    //         </li>`
    //     })
    // }
    //  subentry(pageNum, currentPage)
    //分页
    //获取分页标签
    let arr = gitEleAll('.layout span')
    //遍历伪数组
    arr.forEach(function (v) {
        //获取伪数组的文本值
        let arr1 = v.innerText;

        //点击事件
        v.addEventListener('click', function () {
            //遍历数组清除类名
            arr.forEach(function (v) {
                v.classList.remove('shadow')
            })
            //判断条件当点击事件内的文本值
            if (arr1 == 1) {
                //当文本内的值为1时则等于0作为下标
                pageNum = 0
            } else {
                //否则文本内的值减一剩以定义为5的值作为结束索引
                pageNum = (arr1 - 1) * currentPage
            }
            //调用函数显示数组的所在位置
            subentry('.main ul', pageNum, arr1 * currentPage, listDataArr)
            this.className = 'shadow'
            displayMask()
            imgHref()
        })

    })

    // //下一页事件
    // let pageDown=gitEle(".layout button")
    // pageDown.addEventListener('click', function () {
    //     //遍历数组清除类名
    //     let paging=0
    //     arr.forEach(function(v){
    //         if(v.className==="shadow"){
    //             paging   = v.innerText
    //             console.log(paging)
    //         }

    //     })

    //     //判断条件当点击事件内的文本值
    //     if (paging ) {
    //         //当文本内的值为1时则等于0作为下标
    //         pageNum = paging*5
    //         console.log(pageNum)
    //     } else {
    //         //否则文本内的值减一剩以定义为5的值作为结束索引
    //         pageNum = (paging - 1) * currentPage
    //         console.log(pageNum)
    //     }
    //     //调用函数显示数组的所在位置
    //     subentry(pageNum, paging * currentPage+5)
    //     console.log(paging * currentPage);
    //     this.className = 'shadow'
    //     paging++
    // })


    //获取伪数组 
    // function displayMask() {
    //     let apple = gitEleAll('.main ul h4')

    //     apple.forEach(function (v) {
    //         v.addEventListener('click', function () {

    //             gitEle('.blanket').style.display = 'block'
    //         })
    //     })
    //     gitEle('.blanket').addEventListener('click', function () {

    //         gitEle('.blanket').style.display = 'none'
    //     })
    //     gitEle('form').addEventListener('click', function (e) {
    //         e.stopPropagation()
    //     })

    //     //获取点击事件的标签
    //     let switcher = gitEleAll('.lon-ins div')
    //     // 获取显示隐藏的div
    //     let box1 = gitEleAll('.Login-box')
    //     //遍历事件源
    //     switcher.forEach(function (itme, i) {
    //         // 遍历数组清空类名
    //         itme.addEventListener('click', function () {
    //             switcher.forEach(function (v, index) {
    //                 v.className = '';
    //                 v.className = 'fl font20';
    //                 box1[index].style.display = "none"

    //             })
    //             //添加样式类名
    //             this.className = 'on active fl font20';


    //             box1[i].style.display = "block"
    //         })
    //     })

    // }
    //模态框点击事件
    displayMask()
    imgHref()
    let topDebark = gitEle('#topDebark')
    console.log(topDebark);
    topDebark.addEventListener('click', function () {
        gitEle('.blanket').style.display = 'block';
    })
    //图片跳转
    //获取图片数组
    //     function imgHref(){
    //     let imgs=gitEleAll('.main ul img')
    //     imgs.forEach(function(v){
    //         v.addEventListener('click',function(){
    //             window.location.href='api-paging.html'
    //         })
    //     })
    // }
    let jump = gitEleAll('header a')
    jump.forEach(function (v, i) {
        v.addEventListener('click', function () {

            if (i == 0) {
                window.location.href = 'index.html'
            } else if (i == 1) {
                window.location.href = 'api.html'
            } else if (i == 3) {
                window.location.href = 'unicorn.html'
            } else if (i == 6) {
                window.location.href = 'register.html'
            }else if(i==4){
                window.location.href = 'api-paging.html'
            }

        })
    })







})
